<div class="modal-header">
  <button type="button" class="close" (click)="cancel()">&times;</button>
  <h4 class="modal-title">请选择</h4>
</div>
<div class="modal-body" modal-body>
  <div class="row">
    <div class="col-md-6 col-xs-6">
      <div class="form-container container-12">
        <div class="form-item">
          <input type="text" [(ngModel)]="personname" (keyup.enter)="SerchPerson(personname)" placeholder="输入查询条件" />
          <!-- <span class="unit" (click)="SerchPerson(personname)">搜索</span> -->
          <button class="btn btn-orange" (click)="SerchPerson(personname)">搜索</button>
        </div>
      </div>
      <p-tree [value]="persondepartments" selectionMode="single" [style]="departmentstyle" (onNodeSelect)="GetPerson($event)" [(selection)]="selectingdepartment"></p-tree>
      <div style="margin-top:10px">选择人员</div>
      <p-dataTable [value]="persons" [rows]="10" [paginator]="true" [pageLinks]="5" [rowsPerPageOptions]="[10,20,30]" [(selection)]="selectingpersons"
        selectionMode="multiple" scrollable="true" scrollHeight="150px">
        <p-column field="no" header="员工编号"></p-column>
        <p-column header="姓名">
          <ng-template let-item="rowData" pTemplate="body">
            <div class="text-left">
              <span class="ui-treenode-icon fa fa-fw fa-user"></span>
              <span>{{item.name}}</span>
            </div>
          </ng-template>
        </p-column>
        <ng-template pTemplate="emptymessage">
          请选择部门
        </ng-template>
      </p-dataTable>
    </div>
    <!-- (onNodeSelect)="nodeSelect($event)" (onNodeUnselect)="nodeUnselect($event)" -->
    <div class="col-md-1 col-xs-1">
      <div class="ui-picklist-buttons">
        <div class="ui-picklist-buttons-cell">
          <!-- <button icon="fa-angle-right" pbutton="" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only"><span class="ui-button-icon-left ui-clickable fa fa-fw fa-angle-right"></span><span class="ui-button-text ui-clickable">ui-btn</span></button> -->
          <button (click)="AddPerson()" icon="fa-angle-double-right" pbutton="" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only">
            <span class="ui-button-icon-left ui-clickable fa fa-fw fa-angle-double-right"></span>
            <span class="ui-button-text ui-clickable">ui-btn</span>
          </button>
          <!-- <button icon="fa-angle-left" pbutton="" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only"><span class="ui-button-icon-left ui-clickable fa fa-fw fa-angle-left"></span><span class="ui-button-text ui-clickable">ui-btn</span></button> -->
          <button (click)="DelPerson()" icon="fa-angle-double-left" pbutton="" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only">
            <span class="ui-button-icon-left ui-clickable fa fa-fw fa-angle-double-left"></span>
            <span class="ui-button-text ui-clickable">ui-btn</span>
          </button>
        </div>
      </div>
    </div>
    <div class="col-md-5 col-xs-5" style="padding-top:35px;">
      <p-dataTable [value]="selecteddepersons" [(selection)]="selectingpersons2" selectionMode="multiple" scrollable="true" scrollHeight="380px">
        <p-column field="no" header="员工编号"></p-column>
        <p-column header="姓名">
          <ng-template let-item="rowData" pTemplate="body">
            <div class="text-left">
              <span class="ui-treenode-icon fa fa-fw fa-user"></span>
              <span>{{item.name}}</span>
            </div>
          </ng-template>
        </p-column>
        <ng-template pTemplate="emptymessage">
          请选择人员
        </ng-template>
      </p-dataTable>
    </div>
  </div>
</div>
<div class="modal-footer">
  <button class="btn btn-cancel" (click)="cancel()">取消</button>
  <button class="btn btn-success" (click)="save()">保存</button>
</div>